<template>
  <MainContent back title="流程模板">
    <template #search-bar>
      <SearchBar>
        <template #normal>
          <el-form-item label="流程名称">
            <el-input type="link" clearable v-model="form.name" placeholder="输入搜索关键词" @input="handleNameChange">
            </el-input>
          </el-form-item>

          <el-form-item label="选择模型">
            <el-cascader placehoder="请选择模型/策略" v-model="selectedModel" :props="{
              lazy: true,
              lazyLoad: lazyLoadModelSelect
            }" @change="handleModelSelectChange" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>

          <!--          <ins-cascader-filter @change="handleQueryInsIdsChange"></ins-cascader-filter>-->
        </template>
      </SearchBar>
    </template>

    <div class="model-list">
      <model-card v-for="(item, index) in modelList" :card-data="item" :index="index" @apply="handleApply"
        :key="index"></model-card>
    </div>

    <div class="pagination-wrapper">
      <el-pagination v-model:currentPage="pageInfo.currentPage" v-model:page-size="pageInfo.showCount"
        :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </MainContent>
</template>
<script lang="ts">
export default {
  name: 'FlowModel'
}
</script>
<script lang="ts" setup>
import { debounce } from '@/utils'
import ModelCard from "@/views/flowModel/components/ModelCard.vue";
import {
  getFlowModelList
} from "@/api/flow";
import { ICardData } from "@/views/flowModel/types";
import { Ref } from "vue";
import { useGetFlowModel } from "./compositions/useGetFlowModel";

const router = useRouter()

const form = reactive({
  name: '',
  isSet: -1,
  journeyId: '',
  strategyId: '',
  queryInsIds: [] as any,
})

const pageInfo = reactive({
  currentPage: 1,
  showCount: 10,
  total: 0,
})


const modelList: Ref<ICardData[]> = ref<ICardData[]>([])


const getList = async () => {
  const data = {
    ...form,
    ...pageInfo
  }
  const rs = await getFlowModelList(data)
  if (rs.code === 200) {
    modelList.value = rs.payload
    if (rs.page) {
      pageInfo.total = rs.page.totalResult
    }
  }
}

const selectedModel = ref()
const { lazyLoadModelSelect } = useGetFlowModel()
const handleModelSelectChange = (value: any) => {
  if (value.length > 1) {
    form.journeyId = value[0]
    form.strategyId = value[1]
    handleCurrentChange(1)
  }
}

const handleQueryInsIdsChange = (value: number[]) => {
  form.queryInsIds = value
  handleCurrentChange(1)
}

const handleSizeChange = (val: number) => {
  pageInfo.showCount = val
  getList()
}

const handleCurrentChange = (val: number) => {
  pageInfo.currentPage = val
  getList()
}
const onSearch = debounce(() => {
  handleCurrentChange(1)
}, 300, false);

const handleNameChange = debounce(() => {
  handleCurrentChange(1)
}, 700, false)

const handleSetValueChange = () => {
  handleCurrentChange(1)
}

const handleApply = (cardData: ICardData) => {
  router.push({
    path: '/flow/auto/marketingProcess/workTable',
    query: {
      merchantTemplateId: cardData.id
    }
  })
}
const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    getList();
  },
  {
    deep: true
  }
)
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.model-list {
  overflow: hidden;
  padding: 10px 5px;
}

.pagination-wrapper {
  display: flex;
}

:deep(.icon-arrow-down:before) {
  display: none;
}
</style>
